<template>
  <el-container>
    <el-container class="full-container">
      <div class="full">
        <blockquote class="search">
          <div class="table-top-bar">
            <h5 class="title">模型字段</h5>
            <el-button
              :size="table.btnSize"
              type="text"
              class="link-btn"
              @click="handleAdd();">新增</el-button>
          </div>
          <el-form
            ref="searchForm"
            :model="queryParams"
            :size="form.size"
            :inline-message="form.inlineMessage"
            :status-icon="form.statusIcon"
            :inline="true"
            label-width="70"
            auto-complete="off">
            <el-form-item
              label="字段类型ID"
              prop="columnTypeId">
              <el-input
                v-model="queryParams.columnTypeId"
                placeholder="字段类型ID" />
            </el-form-item>
            <el-form-item>
              <el-button
                :size="table.btnSize"
                type="primary"
                @click="loadData(true)">搜索</el-button>
            </el-form-item>
          </el-form>
        </blockquote>
        <el-table
          v-loading="table.loading"
          :size="table.size"
          :height="tableHeight"
          :highlight-current-row="table.highlightCurrentRow"
          :stripe="table.stripe"
          :border="table.border"
          :data="page.rows"
          :header-row-class-name="table.headerClass"
          row-key="id"
          @sort-change="sortChange">
          <el-table-column
            prop="columnTypeId"
            label="字段类型ID"
            min-width="100"/>
          <el-table-column
            prop="columnLabel"
            label="字段标签"
            min-width="100"/>
          <el-table-column
            prop="colName"
            label="字段名称"
            min-width="100"/>
          <el-table-column
            prop="columnAttr"
            label="字段属性名称(小驼峰)"
            min-width="100"/>
          <el-table-column
            prop="requiredYn"
            label="是否必填"
            min-width="100"/>
          <el-table-column
            prop="uniqueYn"
            label="是否唯一"
            min-width="100"/>
          <el-table-column
            prop="searchYn"
            label="是否支持搜索"
            min-width="100"/>
          <el-table-column
            prop="primaryKeyYn"
            label="是否主键"
            min-width="100"/>
          <el-table-column
            prop="defValue"
            label="默认值"
            min-width="100"/>
          <el-table-column
            prop="maxLength"
            label="长度"
            min-width="100"/>
          <el-table-column
            prop="decimalNum"
            label="小数位数"
            min-width="100"/>
          <el-table-column
            prop="minValue"
            label="最小值"
            min-width="100"/>
          <el-table-column
            prop="maxValue"
            label="最大值"
            min-width="100"/>
          <el-table-column
            prop="minLength"
            label="最小长度"
            min-width="100"/>
          <el-table-column
            prop="systemYn"
            label="系统字段"
            min-width="100"/>
          <el-table-column
            prop="enabledYn"
            label="是否启用"
            min-width="100"/>
          <el-table-column
            prop="columnTypeCd"
            label="字段类型CD"
            min-width="100"/>
          <el-table-column
            prop="sortYn"
            label="支持排序"
            min-width="100"/>
          <el-table-column
            prop="physicalYn"
            label="物理字段"
            min-width="100"/>
          <el-table-column
            prop="intro"
            label="字段描述"
            min-width="100"/>
          <el-table-column
            prop="sortNum"
            label="排序号"
            min-width="100"/>
          <el-table-column
            fixed="right"
            label="操作"
            width="80"
            class-name="cell-opts"
            align="center">
            <template slot-scope="scope">
              <el-button
                :size="table.cellBtnSize"
                type="text"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="queryParams.pageSize?queryParams.pageSize:20"
          :layout="pageLayout"
          :background="pagination.background"
          :small="pagination.small"
          :prev-text="pagination.prevText"
          :next-text="pagination.nextText"
          :current-page="page.curPage ? page.curPage: 1"
          :page-sizes="pagination.pageSizes"
          :total="page.total?page.total:0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
      <el-dialog
        :width="dialog.add.width"
        :title="dialog.add.title"
        :visible.sync="dialog.add.visible"
        :close-on-click-modal="dialog.add.closeOnClickModal"
        :fullscreen="dialog.add.fullscreen"
        :before-close="handleAddClose">
        <el-form
          ref="submitAddForm"
          :model="form.add"
          :size="form.size"
          :rules="rules.add"
          :label-width="form.labelWidth"
          :inline-message="form.inlineMessage"
          :status-icon="form.statusIcon"
          auto-complete="off">
          <el-form-item
            label="字段类型ID"
            prop="columnTypeId">
            <el-input
              v-model="form.add.columnTypeId"
              placeholder="字段类型ID"/>
          </el-form-item>
          <el-form-item
            label="字段标签"
            prop="columnLabel">
            <el-input
              v-model="form.add.columnLabel"
              placeholder="字段标签"/>
          </el-form-item>
          <el-form-item
            label="字段名称"
            prop="colName">
            <el-input
              v-model="form.add.colName"
              placeholder="字段名称"/>
          </el-form-item>
          <el-form-item
            label="字段属性名称(小驼峰)"
            prop="columnAttr">
            <el-input
              v-model="form.add.columnAttr"
              placeholder="字段属性名称(小驼峰)"/>
          </el-form-item>
          <el-form-item
            label="是否必填"
            prop="requiredYn">
            <el-input
              v-model="form.add.requiredYn"
              placeholder="是否必填"/>
          </el-form-item>
          <el-form-item
            label="是否唯一"
            prop="uniqueYn">
            <el-input
              v-model="form.add.uniqueYn"
              placeholder="是否唯一"/>
          </el-form-item>
          <el-form-item
            label="是否支持搜索"
            prop="searchYn">
            <el-input
              v-model="form.add.searchYn"
              placeholder="是否支持搜索"/>
          </el-form-item>
          <el-form-item
            label="是否主键"
            prop="primaryKeyYn">
            <el-input
              v-model="form.add.primaryKeyYn"
              placeholder="是否主键"/>
          </el-form-item>
          <el-form-item
            label="默认值"
            prop="defValue">
            <el-input
              v-model="form.add.defValue"
              placeholder="默认值"/>
          </el-form-item>
          <el-form-item
            label="长度"
            prop="maxLength">
            <el-input
              v-model="form.add.maxLength"
              placeholder="长度"/>
          </el-form-item>
          <el-form-item
            label="小数位数"
            prop="decimalNum">
            <el-input
              v-model="form.add.decimalNum"
              placeholder="小数位数"/>
          </el-form-item>
          <el-form-item
            label="最小值"
            prop="minValue">
            <el-input
              v-model="form.add.minValue"
              placeholder="最小值"/>
          </el-form-item>
          <el-form-item
            label="最大值"
            prop="maxValue">
            <el-input
              v-model="form.add.maxValue"
              placeholder="最大值"/>
          </el-form-item>
          <el-form-item
            label="最小长度"
            prop="minLength">
            <el-input
              v-model="form.add.minLength"
              placeholder="最小长度"/>
          </el-form-item>
          <el-form-item
            label="系统字段"
            prop="systemYn">
            <el-input
              v-model="form.add.systemYn"
              placeholder="系统字段"/>
          </el-form-item>
          <el-form-item
            label="是否启用"
            prop="enabledYn">
            <el-input
              v-model="form.add.enabledYn"
              placeholder="是否启用"/>
          </el-form-item>
          <el-form-item
            label="字段类型CD"
            prop="columnTypeCd">
            <el-input
              v-model="form.add.columnTypeCd"
              placeholder="字段类型CD"/>
          </el-form-item>
          <el-form-item
            label="支持排序"
            prop="sortYn">
            <el-input
              v-model="form.add.sortYn"
              placeholder="支持排序"/>
          </el-form-item>
          <el-form-item
            label="物理字段"
            prop="physicalYn">
            <el-input
              v-model="form.add.physicalYn"
              placeholder="物理字段"/>
          </el-form-item>
          <el-form-item
            label="字段描述"
            prop="intro">
            <el-input
              v-model="form.add.intro"
              placeholder="字段描述"/>
          </el-form-item>
          <el-form-item
            label="排序号"
            prop="sortNum">
            <el-input
              v-model="form.add.sortNum"
              placeholder="排序号"/>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer">
          <el-button
            :size="table.btnSize"
            @click="resetForm('submitAddForm','add')">取 消</el-button>
          <el-button
            :size="table.btnSize"
            type="primary"
            @click="submitAdd()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :width="dialog.edit.width"
        :title="dialog.edit.title"
        :visible.sync="dialog.edit.visible"
        :close-on-click-modal="dialog.edit.closeOnClickModal"
        :fullscreen="dialog.edit.fullscreen"
        :before-close="handleEditClose">
        <el-form
          ref="submitEditForm"
          :model="form.edit"
          :size="form.size"
          :rules="rules.edit"
          :label-width="form.labelWidth"
          :inline-message="form.inlineMessage"
          :status-icon="form.statusIcon"
          auto-complete="off">
          <el-form-item
            label="字段类型ID"
            prop="columnTypeId">
            <el-input
              v-model="form.edit.columnTypeId"
              placeholder="字段类型ID"/>
          </el-form-item>
          <el-form-item
            label="字段标签"
            prop="columnLabel">
            <el-input
              v-model="form.edit.columnLabel"
              placeholder="字段标签"/>
          </el-form-item>
          <el-form-item
            label="字段名称"
            prop="colName">
            <el-input
              v-model="form.edit.colName"
              placeholder="字段名称"/>
          </el-form-item>
          <el-form-item
            label="字段属性名称(小驼峰)"
            prop="columnAttr">
            <el-input
              v-model="form.edit.columnAttr"
              placeholder="字段属性名称(小驼峰)"/>
          </el-form-item>
          <el-form-item
            label="是否必填"
            prop="requiredYn">
            <el-input
              v-model="form.edit.requiredYn"
              placeholder="是否必填"/>
          </el-form-item>
          <el-form-item
            label="是否唯一"
            prop="uniqueYn">
            <el-input
              v-model="form.edit.uniqueYn"
              placeholder="是否唯一"/>
          </el-form-item>
          <el-form-item
            label="是否支持搜索"
            prop="searchYn">
            <el-input
              v-model="form.edit.searchYn"
              placeholder="是否支持搜索"/>
          </el-form-item>
          <el-form-item
            label="是否主键"
            prop="primaryKeyYn">
            <el-input
              v-model="form.edit.primaryKeyYn"
              placeholder="是否主键"/>
          </el-form-item>
          <el-form-item
            label="默认值"
            prop="defValue">
            <el-input
              v-model="form.edit.defValue"
              placeholder="默认值"/>
          </el-form-item>
          <el-form-item
            label="长度"
            prop="maxLength">
            <el-input
              v-model="form.edit.maxLength"
              placeholder="长度"/>
          </el-form-item>
          <el-form-item
            label="小数位数"
            prop="decimalNum">
            <el-input
              v-model="form.edit.decimalNum"
              placeholder="小数位数"/>
          </el-form-item>
          <el-form-item
            label="最小值"
            prop="minValue">
            <el-input
              v-model="form.edit.minValue"
              placeholder="最小值"/>
          </el-form-item>
          <el-form-item
            label="最大值"
            prop="maxValue">
            <el-input
              v-model="form.edit.maxValue"
              placeholder="最大值"/>
          </el-form-item>
          <el-form-item
            label="最小长度"
            prop="minLength">
            <el-input
              v-model="form.edit.minLength"
              placeholder="最小长度"/>
          </el-form-item>
          <el-form-item
            label="系统字段"
            prop="systemYn">
            <el-input
              v-model="form.edit.systemYn"
              placeholder="系统字段"/>
          </el-form-item>
          <el-form-item
            label="是否启用"
            prop="enabledYn">
            <el-input
              v-model="form.edit.enabledYn"
              placeholder="是否启用"/>
          </el-form-item>
          <el-form-item
            label="字段类型CD"
            prop="columnTypeCd">
            <el-input
              v-model="form.edit.columnTypeCd"
              placeholder="字段类型CD"/>
          </el-form-item>
          <el-form-item
            label="支持排序"
            prop="sortYn">
            <el-input
              v-model="form.edit.sortYn"
              placeholder="支持排序"/>
          </el-form-item>
          <el-form-item
            label="物理字段"
            prop="physicalYn">
            <el-input
              v-model="form.edit.physicalYn"
              placeholder="物理字段"/>
          </el-form-item>
          <el-form-item
            label="字段描述"
            prop="intro">
            <el-input
              v-model="form.edit.intro"
              placeholder="字段描述"/>
          </el-form-item>
          <el-form-item
            label="排序号"
            prop="sortNum">
            <el-input
              v-model="form.edit.sortNum"
              placeholder="排序号"/>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer">
          <el-button
            :size="table.btnSize"
            @click="resetForm('submitEditForm','edit')">取 消</el-button>
          <el-button
            :size="table.btnSize"
            type="primary"
            @click="submitEdit()">确 定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </el-container>
</template>
<script>
import Mixin from '@/assets/mixin'
export default {
  name: 'CubeBaseColumn',
  mixins: [Mixin],
  data() {
    return {
      form: {
        add: {
          columnTypeId: '',
          columnLabel: '',
          colName: '',
          columnAttr: '',
          requiredYn: '',
          uniqueYn: '',
          searchYn: '',
          primaryKeyYn: '',
          defValue: '',
          maxLength: '',
          decimalNum: '',
          minValue: '',
          maxValue: '',
          minLength: '',
          systemYn: '',
          enabledYn: '',
          columnTypeCd: '',
          sortYn: '',
          physicalYn: '',
          intro: '',
          sortNum: '',
          id: ''
        },
        edit: {
          columnTypeId: '',
          columnLabel: '',
          colName: '',
          columnAttr: '',
          requiredYn: '',
          uniqueYn: '',
          searchYn: '',
          primaryKeyYn: '',
          defValue: '',
          maxLength: '',
          decimalNum: '',
          minValue: '',
          maxValue: '',
          minLength: '',
          systemYn: '',
          enabledYn: '',
          columnTypeCd: '',
          sortYn: '',
          physicalYn: '',
          intro: '',
          sortNum: '',
          id: ''
        }
      },
      rules: {
        add: {
          columnTypeId: [
            { required: true, message: '请输入字段类型ID', trigger: 'blur' }
          ],
          columnLabel: [
            { required: true, message: '请输入字段标签', trigger: 'blur' }
          ],
          colName: [
            { required: true, message: '请输入字段名称', trigger: 'blur' }
          ],
          columnAttr: [
            {
              required: true,
              message: '请输入字段属性名称(小驼峰)',
              trigger: 'blur'
            }
          ],
          requiredYn: [
            { required: true, message: '请输入是否必填', trigger: 'blur' }
          ],
          uniqueYn: [
            { required: true, message: '请输入是否唯一', trigger: 'blur' }
          ],
          searchYn: [
            { required: true, message: '请输入是否支持搜索', trigger: 'blur' }
          ],
          primaryKeyYn: [
            { required: true, message: '请输入是否主键', trigger: 'blur' }
          ],
          defValue: [
            { required: true, message: '请输入默认值', trigger: 'blur' }
          ],
          maxLength: [
            { required: true, message: '请输入长度', trigger: 'blur' }
          ],
          decimalNum: [
            { required: true, message: '请输入小数位数', trigger: 'blur' }
          ],
          minValue: [
            { required: true, message: '请输入最小值', trigger: 'blur' }
          ],
          maxValue: [
            { required: true, message: '请输入最大值', trigger: 'blur' }
          ],
          minLength: [
            { required: true, message: '请输入最小长度', trigger: 'blur' }
          ],
          systemYn: [
            { required: true, message: '请输入系统字段', trigger: 'blur' }
          ],
          enabledYn: [
            { required: true, message: '请输入是否启用', trigger: 'blur' }
          ],
          columnTypeCd: [
            { required: true, message: '请输入字段类型CD', trigger: 'blur' }
          ],
          sortYn: [
            { required: true, message: '请输入支持排序', trigger: 'blur' }
          ],
          physicalYn: [
            { required: true, message: '请输入物理字段', trigger: 'blur' }
          ],
          intro: [
            { required: true, message: '请输入字段描述', trigger: 'blur' }
          ],
          sortNum: [
            { required: true, message: '请输入排序号', trigger: 'blur' }
          ],
          id: []
        },
        edit: {
          columnTypeId: [
            { required: true, message: '请输入字段类型ID', trigger: 'blur' }
          ],
          columnLabel: [
            { required: true, message: '请输入字段标签', trigger: 'blur' }
          ],
          colName: [
            { required: true, message: '请输入字段名称', trigger: 'blur' }
          ],
          columnAttr: [
            {
              required: true,
              message: '请输入字段属性名称(小驼峰)',
              trigger: 'blur'
            }
          ],
          requiredYn: [
            { required: true, message: '请输入是否必填', trigger: 'blur' }
          ],
          uniqueYn: [
            { required: true, message: '请输入是否唯一', trigger: 'blur' }
          ],
          searchYn: [
            { required: true, message: '请输入是否支持搜索', trigger: 'blur' }
          ],
          primaryKeyYn: [
            { required: true, message: '请输入是否主键', trigger: 'blur' }
          ],
          defValue: [
            { required: true, message: '请输入默认值', trigger: 'blur' }
          ],
          maxLength: [
            { required: true, message: '请输入长度', trigger: 'blur' }
          ],
          decimalNum: [
            { required: true, message: '请输入小数位数', trigger: 'blur' }
          ],
          minValue: [
            { required: true, message: '请输入最小值', trigger: 'blur' }
          ],
          maxValue: [
            { required: true, message: '请输入最大值', trigger: 'blur' }
          ],
          minLength: [
            { required: true, message: '请输入最小长度', trigger: 'blur' }
          ],
          systemYn: [
            { required: true, message: '请输入系统字段', trigger: 'blur' }
          ],
          enabledYn: [
            { required: true, message: '请输入是否启用', trigger: 'blur' }
          ],
          columnTypeCd: [
            { required: true, message: '请输入字段类型CD', trigger: 'blur' }
          ],
          sortYn: [
            { required: true, message: '请输入支持排序', trigger: 'blur' }
          ],
          physicalYn: [
            { required: true, message: '请输入物理字段', trigger: 'blur' }
          ],
          intro: [
            { required: true, message: '请输入字段描述', trigger: 'blur' }
          ],
          sortNum: [
            { required: true, message: '请输入排序号', trigger: 'blur' }
          ],
          id: []
        }
      },
      submit: {
        add: {
          url: '/v3/cube/cubeBaseColumn',
          method: 'POST'
        },
        edit: {
          url: '/v3/cube/cubeBaseColumn/',
          method: 'PUT'
        }
      },
      url: '/v3/cube/cubeBaseColumn'
    }
  }
}
</script>
